import React, {Component} from 'react';
import {Button, Form, Row, Col, DatePicker, Table, Pagination, Input, Select, Modal, Radio} from 'antd';
import moment from 'moment';
import {statistics, excel} from "../value";
import app from '../AppMethod';
import {config} from "../config";
import {Consumer} from "../store";
import '../css/goodTypeManage.css';

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class goodManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            allPage: 0,
            currentGoodType: 1,
            goodData: [
                {
                    good_type_id: '0001',
                    number: '1',
                    good_type: "甜品",
                    good_number: '1',
                    good_status: 0
                },
                {
                    good_type_id: '0002',
                    number: '2',
                    good_type: "小吃",
                    good_number: '2',
                    good_status: 1
                },
                {
                    good_type_id: '0003',
                    number: '3',
                    good_type: "蛋糕",
                    good_number: '3',
                    good_status: 1
                },
            ],
            selectedRowKeys: [],
            visible: false,
            value: 1
        }
    };

    columns = [
        {
            title: '序号',
            dataIndex: 'number'
        },
        {
            title: '分类名',
            dataIndex: 'good_type',
            render: good_type => {
                let text = '';
                if (good_type == 1) {
                    text = '甜品';
                } else if (good_type == 2) {
                    text = '蛋糕';
                } else {
                    text = '其它';
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '序号',
            dataIndex: 'good_number',
            sorter: true,
        },
        {
            title: '状态',
            dataIndex: 'good_status',
            sorter: true,
            render: good_status => {
                let text = '';
                if (good_status == 0) {
                    text = '停用';
                } else if (good_status == 1) {
                    text = '启用';
                }
                return (
                    <span>
                        {
                            good_status == 1 ?
                                <span style={{color: '#008000'}}>{text}</span> :
                                <span>{text}</span>
                        }
                    </span>
                )
            }
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <span>
                        {
                            data.good_status == 0 ?
                                <span style={{color: '#1890ff', cursor: 'pointer'}}>启用</span>
                                :
                                <span style={{color: 'red', cursor: 'pointer'}}>停用</span>
                        }
                        <span style={{color: 'red', cursor: 'pointer', marginLeft: '10px'}}
                              onClick={() => this.handleFinish(data.car_id)}>{'删除'}</span>
                    </span>
                )
            }
        }
    ];

    render() {
        return (
            <div style={{height: '100%'}}>
                <div className="goodTypeManageHeader"></div>
                <div className="goodTypeManageContainer">
                    <div className="goodTypeManageTitle">
                        商品管理/分类管理
                    </div>
                    <Row className="goodTypeManageListContainerAdd">
                        <div className="ContainerAddTypeName">
                            <div style={{width:70}}>分类名：</div><Input placeholder="请输入" style={{marginTop:'24px'}}/>
                        </div>
                        <div className="ContainerAddTypeNumber">
                            <div style={{width:50}}>序号：</div><Input placeholder="请输入" style={{marginTop:'24px'}}/>
                        </div>
                        <div className="ContainerAddTypeNumber">
                            状态：<RadioGroup onChange={this.handleSettingOnChange} value={this.state.value} style={{paddingTop:0,marginLeft:5}}>
                            <Radio value={1}>启用</Radio>
                            <Radio value={2}>停用</Radio>
                        </RadioGroup>
                        </div>
                        <div>
                            <Button type={'primary'}>添加</Button>
                        </div>
                    </Row>
                    <div className="goodManageListTableContainer">
                        <Table
                            columns={this.columns}
                            rowKey={record => record.good_type_id}
                            loading={this.state.loading}
                            dataSource={this.state.goodData}
                            pagination={false}
                        >
                        </Table>
                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "订单数据统计"});
        let date_end = moment(new Date()).format('YYYY-MM-DD');
        let date_start = app.getBeforeDate(4);
        let data = {page: 1, size: 5, date_start: date_start, date_end: date_end};
        //this.handleGetOrderList(data);
    };

    /**
     * 处理状态选择变化事件
     */
    handleSettingOnChange=(e)=>{
        this.setState({value:e.target.value});
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    handleChangeImg(id) {
        let orderData = this.state.orderData;
        for (let i = 0; i < orderData.length; i++) {
            if (id == orderData[i].orderId) {
                orderData[i].show = !orderData[i].show;
            }
        }
        this.setState({orderData: orderData});
    }

    /**
     * 获取订单数据列表
     * @param data
     */
    handleGetOrderList(data = {page: 1, size: 5, date_start: '2018-06-01', date_end: '2018-06-05'}) {
        this.setState({loading: true});
        app.post(statistics.TOTAL_OUTPUTSTATISTICS, data).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                this.setState({allPage, pagination});
                let employeeData = result.data.dataSet;
                let employeeData1 = [];
                let employeeData2 = [
                    ['time', '下单数', '未配货', '已配货', '配送中', '已配送'],
                ];
                for (let i = 0; i < employeeData.length; i++) {
                    employeeData[i].date_id = employeeData[i].date_id == null ? '' : moment(employeeData[i].date_id).format('YYYY-MM-DD');
                    employeeData1 = [];
                    employeeData1.push(employeeData[i].date_id);
                    employeeData1.push(employeeData[i].total_output);
                    employeeData1.push(employeeData[i].total_unpick);
                    employeeData1.push(employeeData[i].total_pick);
                    employeeData1.push(employeeData[i].total_send);
                    employeeData1.push(employeeData[i].total_finish);
                    employeeData2.push(employeeData1);
                }
                let rawMill = this.state.rawMill;
                rawMill.dataset.source = employeeData2;
                this.setState({rawMill, data: employeeData, loading: false});
            } else {
                let rawMill = this.state.rawMill;
                rawMill.dataset.source = [['time', '下单数', '未配货', '已配货', '配送中', '已配送']];
                this.setState({rawMill, data: [], loading: false});
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({allPage, pagination});
                app.alert(result.msg, 'error', 3);
            }
        })
    };

    /**
     * 根据条件搜索订单列表
     * @param value
     */
    handleGetSearch(value) {
        let times = value.date;
        let date_start = undefined;
        let date_end = undefined;
        if (times != undefined && times.length > 0) {
            date_start = moment(times[0]._d).format('YYYY-MM-DD');
            date_end = moment(times[1]._d).format('YYYY-MM-DD');
        }
        let tempData = {
            date_start: date_start,
            date_end: date_end
        };
        this.setState({searchData: tempData});
        let searchData = tempData;
        searchData.page = 1;
        searchData.size = 5;
        this.handleGetOrderList(searchData);
    };

    /**
     * 处理重置事件
     */
    handleReset() {
        this.setState({searchData: {}});
        let date_end = moment(new Date()).format('YYYY-MM-DD');
        let date_start = app.getBeforeDate(4);
        let data = {page: 1, size: 5, date_start: date_start, date_end: date_end};
        this.handleGetOrderList(data);
    };

    /**
     * 处理分页跳转事件
     * @param page
     * @param size
     */
    handlePageChange(page, size) {
        let data = this.state.searchData;
        data.page = page;
        data.size = size;
        this.handleGetOrderList(data);
    };

    /**
     * 处理导出Excel事件
     * @param value
     */
    handleExport(value) {
        let times = value.date;
        let date_start = undefined;
        let date_end = undefined;
        if (times != undefined && times.length > 0) {
            date_start = moment(times[0]._d).format('YYYY-MM-DD');
            date_end = moment(times[1]._d).format('YYYY-MM-DD');
        }
        let tempData = {
            date_start: date_start,
            date_end: date_end
        };
        let params = app.getParams(tempData);
        if (params.length > 0) {
            window.location.href = config.serverUrl + excel.EXPORT_OUTPUTSTATISTICS + '?' + params;
        } else {
            app.alert('请选择时间范围', 'error', 3);
        }
    }
};

const GoodManages = Form.create()(goodManage);
export default prop => (
    <Consumer>
        {
            props => (
                <GoodManages {...prop} {...props}/>
            )
        }
    </Consumer>
);